<script lang="ts" setup>
import { useColPickerData } from '@/hooks/useColPickerData'

definePage({
  style: {
    navigationBarTitleText: '',
  },
})

const { colPickerData, findChildrenByCode } = useColPickerData()

const city = ref<string[]>([])
// 城市数据
const cityList = ref<any[]>([
  colPickerData,
])
// 城市选择相关
function handleCityColumnChange({ selectedItem, resolve, finish }) {
  const areaData = findChildrenByCode(colPickerData, selectedItem.value)
  if (areaData && areaData.length) {
    resolve(areaData)
  }
  else {
    finish()
  }
}
function handleSubmit() {
  city.value = []
}
</script>

<template>
  <view class="flex flex-col items-center">
    city：{{ city }}
    <wd-col-picker v-model="city" title="试骑城市" :columns="cityList" :column-change="handleCityColumnChange" />
    <wd-button
      class="mt-48rpx h-100rpx! w-700rpx! rounded-12rpx! from-#FF5F00! to-#FF4233! bg-gradient-to-r! text-32rpx!"
      @click="handleSubmit"
    >
      预约试骑
    </wd-button>
  </view>
</template>
